<!-- 审批记录（表格）组件，仅做展示使用 -->
<template>
    <NDataTable :bordered="false" :columns="columns" :data="tableData" :pagination="false" striped :rowKey="rowKey" />
</template>

<script setup lang="ts">

import { NDataTable } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useViewerStore } from '@/views/OA/Common/store'
import { ref, watch } from 'vue'

const useStore = useViewerStore()

const props = defineProps({
    data: { type: Array, default: [] }
})
const rowKey: any = (row: any) => row.id || ''
const tableData: any = ref<any>(props.data)

watch(() => props.data, (newV)=> {
    tableData.value = newV
})

/** 表格列 */
const columns: DataTableColumns = [
    {
        title: '类型',
        key: 'type',
        width: 50,
        align: useStore.isCenter,
    },
    {
        title: '人员',
        key: 'userName',
        width: 50,
        align: useStore.isCenter,
    },
    {
        title: '时间',
        key: 'time',
        width: 100,
        align: useStore.isCenter,
    },
    {
        title: '结果',
        key: 'result',
        width: 50,
        align: useStore.isCenter,
    },
    {
        title: '备注',
        key: 'remark',
        width: 150,
        align: useStore.isCenter,
    }
]

</script>

<style scoped lang="scss">
.table {
    background-color: #e1e1e1;
}
</style>